import React from 'react'
import styles from '@/assets/pay/pay.module.css';

const RoomPay = () => {
    let [searchParams] = React.Router.useSearchParams()
    let orderid = React.useState(searchParams.get('orderid') ? searchParams.get('orderid') : 0)
    let [order, SetOrder] = React.useState<object | any>({
        type: searchParams.get('pay') ? searchParams.get('pay') : 'zfb',
        price: '666',
        name: '酒店预定',
        code: 'HT202409301212506131256',
        wxcode: require('@/assets/pay/images/wx.jpg'),
        zfbcode: require('@/assets/pay/images/zfb.jpg')
    })
    let [notice, SetNotice] = React.useState('付款金额要与显示的金额一致，否则后果自负')
    let [maxtime, SetMax] = React.useState<number | any>(0) //总秒数
    let T1 = React.useRef<any | null>(null);
    let T2 = React.useRef<any | null>(null); //定时器

    React.useEffect(() => {
        OrderData()
    }, [])

    React.useEffect(() => 
    {
        if (maxtime == 60) 
        {
            T1.current = setInterval(() => SetMax((prev: any) => prev - 1), 1000)
            SetOrder({
                ...order,
                wxcode: require('@/assets/pay/images/wx.jpg'),
                zfbcode: require('@/assets/pay/images/zfb.jpg'),
            })
        } 
        else if (maxtime == 0) 
        {

            clearInterval(T1.current)
            clearInterval(T2.current)

            SetOrder({
                ...order,
                wxcode: require('@/assets/pay/images/qrcode_timeout.png'),
                zfbcode: require('@/assets/pay/images/qrcode_timeout.png'),
            })

            SetNotice('订单已失效，请手动关闭页面，请重新下单')
        }
    }, [maxtime])

    const OrderData = async () => 
    {

        SetMax(60)

        
        const query = async () => 
        {   
            
        }

        T2.current = setInterval(query, 5000)
    }

    return (
        <>
            <h1 className={styles.mod_title}>
                <span className={order.type == "zfb" ? "ico_log ico-4" : "ico_log ico-3"}></span>
            </h1>

            <div className={styles.mod_ct}>
                <div className={styles.order}></div>

                <div style={{ marginTop: '10px' }}>
                    <span style={{ color: 'red' }}>提示：{notice}</span>
                </div>

                <div className={styles.amount} id="money">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥<span id="copyText" className={styles.amount2}>{order.price}</span>元
                    <span style={{ fontSize: '10px', color: 'darkcyan' }}>&nbsp;&nbsp;复制金额</span>
                </div>

                <div className="qrcode-img-wrapper">
                    <div className="qrcode-img-area">
                        <div className="ui-loading qrcode-loading" style={{ display: 'none' }}></div>
                        <div style={{ position: 'relative', display: 'inline-block' }}>
                            <img id="imgCode" src={order.type == 'wx' ? order.wxcode : order.zfbcode} style={{ width: '220px' }} />
                        </div>
                    </div>
                </div>

                <div className={styles.time_item} style={{ paddingTop: '10px' }}>
                    <div className={styles.time_item} id="msg">
                        <h1 className={styles.time_item}>订单名称：<span>{order.name}</span></h1>
                    </div>

                    <div className={styles.time_item}>
                        <h1>订单号:<span>{order.code}</span></h1>
                    </div>

                    <strong id="hour_show"><s id="h"></s>订单支付有效期</strong>
                    <strong id="second_show">{maxtime}秒</strong>
                    <div className={styles.time_item}></div>
                </div>

                <div className={styles.tip}>
                    <div className={styles.ico_scan}></div>
                    <div className={styles.tip_text}>
                        <p id="showtext">{order.type == 'wx' ? '打开微信[扫一扫]' : '打开支付宝[扫一扫]'}</p>
                    </div>
                </div>
            </div>
        </>
    )
}

export default RoomPay